<template>
  <div class="index">
    <div class="shareText" v-if="isMobileDevice">
      <div>长按下方图片保存或分享</div>
    </div>
    <div class="shareText" v-if="!isMobileDevice">
      <div>保存这张图片到手机相册</div>
      <div>即可分享给好友啦！</div>
    </div>
    <!-- <div v-if="imgUrl" class="modal-content">
      <img style="width: 100%" :src="imgUrl" alt="Screenshot" />
    </div> -->
    <div  ref="content" class="content">
      <img src="@/assets/end/poster.jpg" alt="" />
    </div>
    <div class="btu_box">
      <div class="btuBg" @click.stop="goBack">返回</div>
      <div class="btuBg" v-if="!isMobileDevice" @click.stop="saveImageLocally">
        保存图片
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";

export default {
  name: "index",
  data() {
    return {
      content: null,
      imgUrl: null,
      passedTime: 0,
      isMobileDevice:
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
          navigator.userAgent
        ),
    };
  },
  created() {
    this.passedTime = localStorage.getItem("seconds");
    this.$nextTick(() => {
      this.getPrintScreen();
    });
  },
  mounted() {},

  methods: {
    goindex1() {
      this.$router.push({
        path: "/01/register/index1",
      });
    },
    go() {
      this.$router.push({
        path: "/",
      });
    },
    goBack() {
      // 返回上一页
      this.$router.go(-1);
    },
    saveImageLocally() {
      if (this.isMobileDevice) {
        // 提示移动设备用户长按图片保存或分享
        // alert("长按图片保存或分享");
      } else {
        if (this.imgUrl) {
          const link = document.createElement("a");
          link.href = this.imgUrl;
          link.download = "screenshot.png";
          link.click();
        }
      }
    },
    getPrintScreen() {
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      console.log(this.$refs.content, "this.$refs.content");
      html2canvas(this.$refs.content, {
        // width: 30, //截图宽度
        // height: 50, //截图高度
        backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, //支持图片跨域
        scale: 1, //设置放大的倍数
      }).then((canvas) => {
        // 把生成的base64位图片上传到服务器,生成在线图片地址
        let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64
        console.log("base64图片地址", url);
        this.imgUrl = url;
      });
    },
  },
};
</script>

<style scoped lang="less">
.index {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(@/assets/end/shareBg.png) no-repeat top;
  background-size: 100% 100%;
  // max-height: 1334px;
}
@media screen and (min-width: 440px) {
}
@media screen and (max-width: 440px) {
  .shareText {
    position: absolute;
    left: 50%;
    top: 4vh;
    transform: translate(-50%);
    width: 600px;
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    text-align: center;
  }
  .modal-content {
    border: 8px solid white;
    position: absolute;
    left: 50%;
    top: 12vh;
    transform: translate(-50%);
    border-radius: 8px;
    width: 70%;
    height: 70%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    border: 8px solid white;
    position: absolute;
    left: 50%;
    top: 12vh;
    transform: translate(-50%);
    border-radius: 8px;
    width: 70%;
    height: 70%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .btu_box {
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    bottom: 2.5vh;
    transform: translate(-50%);
    .btuBg {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 326px;
      height: 134px;
      background: url(@/assets/end/shortButton.png) no-repeat center;
      background-size: 100% 100%;
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 48px;
      color: #ffffff;
    }
  }
}
</style>
